<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../../lib/font-awesome-4.7.0/css/font-awesome.css">
    <link rel="stylesheet" href="../../lib/element-ui/element-ui-2.8.2.css">
    <link rel="stylesheet" href="../../lib/iconPicker/fontawesome-iconpicker.min.css">

    <style>
        .custom-tree-node {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 14px;
            padding-right: 8px;
        }

        .el-tree {
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        .el-tree-node {

            margin: 5px 0;

        }

        .iconpicker-popover.popover {

            width: 227px;

        }
    </style>
</head>
<body>
<div id="app" v-loading="loading">

    <div>

        <el-dialog :visible.sync="dialogVisible" title="提示" width="30%">
            <div>
                确定删除
                <el-tag>{{dialogList.funcName}}</el-tag>
                吗？
            </div>
            其子菜单为
            <span v-for="item in dialogList.childFunc">
                <el-tag>{{item.funcName}}</el-tag>
            </span>

            <span slot="footer">
            <el-button round @click="dialogVisible = false">取消</el-button>
            <el-button type="danger" round @click="delFunc">确定</el-button>
            </span>

        </el-dialog>

    </div>

    <el-row type="flex" justify="space-around">

        <el-col :span=5>


            <el-tree
                    :data="funcList"
                    :props="props"
                    show-checkbox
                    :default-expand-all=false
                    :expand-on-click-node=false
                    :draggable=true
                    @node-click="handleNodeClick"
                    @node-drop="nodeDrop"

            >




                <span class="custom-tree-node" node-key="funcId" slot-scope="{  node, data  }">
                    <span>
                        <i :class="data.icon"></i>
                        <span>{{ node.label }}</span>
                    </span>

                      <el-button type="danger" icon="el-icon-delete" size="mini" circle @click="visitTip(data)">

                      </el-button>
                    </span>
                </span>
            </el-tree>


        </el-col>
        <el-col :span=10>

            <el-form :rules="rules" :model="form" :ref="form" label-position="right" label-width="100px">

                <el-form-item label="菜单名称" prop="funcName">
                    <el-input v-model="form.funcName"></el-input>
                </el-form-item>


                <el-form-item label="父菜单" prop="pid">
                    <el-select v-model="form.pid" @change="getCurrFuncUrl">

                        <el-option label="无" value="0">
                            <span style="float: left">无</span>
                            <span style="float: right;font-size: 8px">(创建一级菜单)</span>
                        </el-option>
                        <el-option
                                v-for="item in funcList"
                                :key="item.funcId"
                                :value="item.funcId"
                                :label="item.funcName"

                        >

                            <!--                            <span style="float: left">pid:{{ item.funcId }}</span>-->
                            <!--                            <span style="float: right">{{ item.funcName }}</span>-->

                        </el-option>

                    </el-select>

                </el-form-item>

                <el-form-item label="url地址" prop="url">
                    <el-input v-model="form.url">
                        <template slot="prepend">{{preText}}/</template>
                    </el-input>
                </el-form-item>

                <el-form-item label="是否子菜单" prop="funcLevel">

                    <el-switch
                            active-text="是"
                            inactive-text="否"
                            v-model="form.funcLevel">
                    </el-switch>

                </el-form-item>

                <el-form-item label="排序" prop="order">

                    <el-input-number
                            v-model="form.order"

                            :min="1" :max="10"
                            label="描述文字"
                    ></el-input-number>

                </el-form-item>

                <el-form-item label="图标">

                    <el-input id="iconPicker" v-model="form.funcIcon" clearable @change="checkedIcon">
                        <template slot="prepend">{{iconPre}}</template>

                        <template slot="append">
                            <i :class="appendIcon"></i>
                        </template>

                    </el-input>

                </el-form-item>


                <el-form-item>

                    <el-button type="primary" round @click="submitForm">提交</el-button>
                    <el-button type="danger" round @click="resetForm(form)">重置</el-button>
                </el-form-item>

            </el-form>

        </el-col>
    </el-row>

</div>
</body>
</html>
<script src="../../lib/jQuery-3.31/jquery-3.3.1.js"></script>
<script src="../../lib/vue/vue.js"></script>
<script src="../../lib/element-ui/elementUI-2.8.2.js"></script>
<!--<script src="../lib/fontawesome-iconpicker-3.0.0/dist/js/fontawesome-iconpicker.min.js"></script>-->
<script src="../../lib/iconPicker/fontawesome-iconpicker.min.js"></script>
<script>

    const app = new Vue({

        el: '#app',
        data: {

            form: {
                funcId: '',
                funcName: '',
                url: '',
                pid: '',
                funcLevel: false,
                order: '1',
                funcIcon: ''
            },
            dialogVisible: false,
            appendIcon: '',
            preText: '',
            iconPre: 'fa',
            loading: false,
            funcList: [],
            props: {
                label: 'funcName',
                children: 'childFunc'
            },
            dialogList: [],


            rules: {

                funcName: [
                    {required: true, message: "菜单名不能为空", trigger: 'blur'}
                ],
                pid: [
                    {
                        validator: function (rule, value, callback) {

                            if (app.form.pid === '') {

                                callback(new Error("父菜单不能为空"))
                            } else {
                                callback()
                            }
                        }, trigger: 'blur'
                    }
                ],
                url: [
                    {required: true, message: "URL地址不能为空", trigger: 'blur'},

                    {
                        validator: function (rule, value, callback) {
                            let thisvalue = app.preText + "/" + app.form.url;

                            for (let func of app.funcList) {

                                for (let child of func.childFunc) {

                                    if (thisvalue === child.funcUrl) {

                                        callback(new Error("已有该URL地址的菜单，菜单名字为[" + child.funcName + "]"));
                                        return
                                    } else {
                                        callback();
                                    }
                                }
                            }

                        }, trigger: 'blur'
                    },

                ]


            }


        },

        methods: {

            visitTip: function (data) {

                this.dialogVisible = true;
                this.dialogList = data;

            },

            checkedIcon: function () {

                app.appendIcon = app.iconPre + ' ' + app.form.funcIcon

            },

            submitForm: function () {

                $.ajax({

                    url: '/system/addFunc',
                    type: 'get',
                    data: {
                        'funcId': app.form.funcId,
                        'funcName': app.form.funcName,
                        'funcUrl': '/' + app.form.url,
                        'funcLevel': app.form.funcLevel ? '2' : '1',
                        'pid': app.form.pid,
                        'funcOrder': app.form.order,
                        'icon': app.iconPre + ' ' + app.form.funcIcon
                    },
                    dataType: 'json',
                    success: function (result) {

                        if (result.success === true) {

                            app.$notify.success({

                                title: '成功',
                                message: result.msg

                            });

                            getMenu();
                            parent.getData();

                        } else {

                            app.$notify.error({
                                title: '错误',
                                message: result.msg
                            })
                        }


                    }
                })

            },
            resetForm: function (formName) {
                this.$refs[formName].resetFields();
                this.preText = '';
                this.form.funcId = '';
                this.form.funcIcon = '';
            },

            getCurrFuncUrl: function () {

                let pid = this.form.pid;

                for (let func of app.funcList) {

                    if (func.funcId === pid) {
                        app.preText = func.funcUrl;
                        return;
                    }

                }

            },

            handleNodeClick: function (data) {


                this.form.funcName = data.funcName;
                this.form.funcId = data.funcId;
                this.form.funcLevel = data.funcLevel !== '1';
                this.form.pid = data.pid;
                this.form.order = data.funcOrder;

                this.form.funcIcon = data.icon;
                if (data.icon !== null || data.icon !== null) {
                    let iconArr = data.icon.split(' ');
                    this.iconPre = iconArr[0];
                    this.form.funcIcon = iconArr[1];
                }

                if (data.pid === '0') {
                    let urlArr = data.funcUrl.split('/');
                    this.form.url = urlArr[1];
                } else {

                    let urlArr = data.funcUrl.split('/');
                    this.preText = '/' + urlArr[1];
                    this.form.url = urlArr[2];
                }


            },

            delFunc: function () {

                $.ajax({

                    url: '/system/delFunc',
                    data: {'funcId': app.dialogList.funcId},
                    success: function (result) {

                        if (result.success === true) {

                            app.$notify.success({
                                title: '成功',
                                message: result.msg
                            });
                            app.dialogVisible = false;
                            getMenu();
                            parent.getData();

                        } else {
                            app.$notify.error({
                                title: '失败',
                                message: result.msg
                            })
                        }
                    }
                })


            },


            nodeDrop: function (nodeDroped, innerNode, location) {


            }


        },

        created: getMenu()


    })

    function getMenu() {
        $.ajax({

            url: "/const/funcTree",
            type: 'get',
            dataType: 'json',
            success: function (result) {

                if (result.success === true) {

                    app.funcList = result.data;

                    app.$notify({

                        title: "提示",
                        message: result.msg,
                        type: 'success'

                    })
                }

            }

        });

    };

    $('#iconPicker').iconpicker();

    $('#iconPicker').on('iconpickerSelected', function (event) {
        /* event.iconpickerValue */

        app.form.funcIcon = event.iconpickerValue;
        app.appendIcon = app.iconPre + ' ' + event.iconpickerValue;

    });


</script>